<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>组件基础</h2>
    <item-component></item-component>
    <page-footer></page-footer>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    // 创建组件

    // 一个大的页面就是由诺干个小的组件组成的

    // 一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义
    // 取名要使用大驼峰, 在使用的时候要改成对应的连字符
    // 不能使用html里面已经存在的标签名字
    // 取名要尽量语义化

    // 每一个组件都是一个vue的实例
    // 必须要有一个template选项，其他的选项和createApp里面一模一样
    const ItemComponent = {
      data() {
        return {
          count: 123
        }
      },
      template: `
        <div class="item">
          <h3>{{count}}</h3>
          <p>11111</p>
        </div>
      `
    }

    const PageFooter = {
      template: `
        <footer>这是页面的底部</footer>
      `
    }

    createApp({
      data() {
        return {}
      },
      computed: {},
      watch: {},
      methods: {},
      components: {
        ItemComponent: ItemComponent,
        PageFooter,
      }
    }).mount("#app")

  </script>
</body>
</html>